<template>
  <div
    class="w-full h-[150px] bg-black/30 backdrop-blur-sm flex flex-col items-center justify-center rounded-xl transition-transform duration-100 hover:scale-101"
  >
    <!-- 装饰左侧边 -->
    <div class="absolute top-0 left-0 pl-2">
      <slot name="left">
        <div class="text-[50px]">{{ description }}</div>
      </slot>
    </div>
    <!-- 内容 -->
    <div class="text-[18px]">
      {{ title }}
    </div>
    <!-- 作者展示 -->
    <div class="text-[18px]">
      <slot name="author"> </slot>
    </div>
    <!-- 时间展示 -->
    <div class="text-[30px]">
      <slot name="time"> </slot>
    </div>
    <!-- 装饰右边 -->
    <div class="absolute bottom-0 right-0 pr-2">
      <slot name="right">
        <div class="text-[50px] h-[50px]">{{ description }}</div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title?: string;
  description?: string;
  author?: string;
}>();
</script>

<style scoped lang="scss"></style>
